<template>
  <div class="test-container">
    <div class="top-main">
      <search :listQuery="listQuery" :path="$route.name"></search>
    </div>
    <div class="bottom-main">
      <div class="list-button-group">
        <div class="button-item">
          <el-button type="primary" icon="el-icon-plus" @click="add">
            新增
          </el-button>
        </div>
        <!-- <div class="button-item">
          <el-button type="primary" :disabled="selectrow.length == 1 ? false : true" icon="el-icon-edit-outline">
            生成拣货单
          </el-button>
        </div> -->
        <!-- <div class="button-item">
          <el-button type="primary" :disabled="selectrow.length == 0" icon="el-icon-printer">
            打印
          </el-button>
        </div> -->
      </div>
      <div class="table-list">
        <el-table
          ref="tableSort"
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
          highlight-current-row
          height="100%"
          :header-cell-style="{
            'border-bottom': '1px solid #cbcccd',
            'border-top': '1px solid #cbcccd',
          }"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="chukudh"
            label="出库单号"
            align="center"
            width="300"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="名称"
            prop="mingcheng"
            align="center"
          ></el-table-column>
          <!-- <el-table-column show-overflow-tooltip label="库房名称" prop="kufangmc" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="主管单位" prop="zhuguandwmc" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="物资区分" prop="wuziqfmc" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="物资分类" prop="wuzizymc" align="center"></el-table-column> -->

          <el-table-column
            show-overflow-tooltip
            label="出库类型"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.chukulx == 1">使用出库</span>
              <span v-if="scope.row.chukulx == 2">维修出库</span>
              <span v-if="scope.row.chukulx == 3">报损出库</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="状态"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              {{ $util.getCkzt(scope.row.zhuangtai) }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="备注"
            prop="tips"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="创建人"
            prop="createName"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="创建日期"
            prop="createTime"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="操作"
            fixed="right"
            width="240"
          >
            <template #default="{ row }">
              <el-button type="text" @click="showdetail(row)">明细</el-button>
              <el-button
                type="text"
                :disabled="row.zhuangtai != 1"
                @click="accept(row)"
              >
                出库确认
              </el-button>
              <el-button
                type="text"
                :disabled="row.zhuangtai != 1"
                @click="edit(row)"
              >
                编辑
              </el-button>
              <!-- <el-button type="text" @click="deleteCKD(row)">删除</el-button> -->
              <el-dropdown @command="deleteCKD(row, $event)" trigger="click">
                <span class="el-dropdown-link">
                  更多
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1">未开始</el-dropdown-item>
                  <el-dropdown-item :command="2">进行中</el-dropdown-item>
                  <el-dropdown-item :command="3">出库完成</el-dropdown-item>
                  <el-dropdown-item :command="4" :disabled="row.zhuangtai == 1">
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-dropdown
                @command="updateStatuCkd(row, $event)"
                trigger="click"
              >
                <span class="el-dropdown-link">
                  更新状态
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1">未开始</el-dropdown-item>
                  <el-dropdown-item :command="2">进行中</el-dropdown-item>
                  <el-dropdown-item :command="3">出库完成</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :background="background"
        :current-page="listQuery.pageIndex"
        :page-sizes="[10, 20, 30, 50]"
        :layout="layout"
        :page-size="listQuery.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <page-1-add
      v-if="addshow"
      :gobacktitle="gobacktitle"
      :datarow="gobacktitle == '新增' ? {} : datarow"
    ></page-1-add>
    <accept
      v-if="acceptshow"
      :gobacktitle="gobacktitle"
      :datarow="detailrow"
    ></accept>
    <detail
      v-if="detailshow"
      :gobacktitle="gobacktitle"
      :datarow="detailrow"
    ></detail>
  </div>
</template>
<script>
  let _listQuery = {
    pageIndex: 1,
    pageSize: 10,
  }
  import {
    getCKDlist,
    getCKDone,
    DelCKD,
    updateChukudStatus,
  } from '@/api/exwarehouse'
  import search from './components/search.vue'
  import Page1Add from './components/page1Add.vue'
  import Detail from './components/page1Detail.vue'
  import Accept from './components/page1Accept.vue'
  export default {
    name: 'Test',
    data() {
      return {
        listQuery: Object.assign({}, _listQuery),
        show: true,
        listLoading: true,
        total: 0,
        elementLoadingText: '正在加载...',
        list: [],
        layout: 'total,sizes,prev, pager, next, jumper',
        background: true,
        addshow: false,
        detailshow: false,
        acceptshow: false,
        gobacktitle: '',
        datarow: {},
        selectrow: [],
        detailrow: {},
        ckztlist: [],
      }
    },
    components: { search, Page1Add, Detail, Accept },
    created() {
      if (this.$route.query.type == 'year') {
        this.listQuery.startTime = this.$util.changeBZTime(
          new Date(new Date().getFullYear(), 0, 1)
        )
      } else if (this.$route.query.type == 'season') {
        this.listQuery.startTime = this.$util.thirteenBitTimestamp(
          new Date().getTime() - 90 * 24 * 3600 * 1000
        )
      } else if (this.$route.query.type == 'month') {
        this.listQuery.startTime = this.$util.thirteenBitTimestamp(
          new Date().getTime() - 30 * 24 * 3600 * 1000
        )
      } else if (this.$route.query.type == 'week') {
        this.listQuery.startTime = this.$util.thirteenBitTimestamp(
          new Date().getTime() - 7 * 24 * 3600 * 1000
        )
      }
      this.fetchData()
    },
    async mounted() {},
    methods: {
      updateStatuCkd(row, command) {
        if (row.zhuangtai == command) {
          this.$baseMessage('当前状态与操作一致，无需修改', 'error')
        } else {
          updateChukudStatus({
            id: row.id,
            zhuangtai: command,
          }).then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.fetchData()
          })
        }
      },
      setSelectRows(val) {
        this.selectrow = val
      },
      ckzt(id) {
        let datarow = this.ckztlist.filter((item) => item.id == id)
        if (datarow.length > 0) return datarow[0].mingcheng
      },
      async fetchData() {
        let { data } = await getCKDlist(this.listQuery)
        this.list = data.rows
        this.total = data.total
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      },
      add() {
        this.addshow = true
        this.gobacktitle = '新增'
      },
      async edit(row) {
        this.gobacktitle = '编辑'
        let data = await getCKDone({ id: row.id })
        this.datarow = data.data
        console.log(this.datarow)
        this.addshow = true
      },

      searchCkd() {
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      resetlist() {
        this.listQuery = Object.assign({}, _listQuery)
        this.fetchData()
      },
      async showdetail(row) {
        let data = await getCKDone({ id: row.id })
        this.detailshow = true
        this.gobacktitle = '出库单明细'
        this.detailrow = data.data
      },
      async accept(row) {
        const mxData = await getCKDone({ id: row.id })
        this.acceptshow = true
        this.gobacktitle = '出库验收'
        this.detailrow = mxData.data
      },
      async deleteCKD(row, command) {
        if (command == 4) {
          this.$confirm('确认删除选中的数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(async () => {
            let data = await DelCKD({ id: row.id })
            this.$message({
              message: data.msg,
              type: 'success',
            })
          })
        } else {
          this.updateStatuCkd(row, command)
        }

        this.fetchData()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .test-container {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: #f6f8f9 !important;
    height: 100%;

    .top-main {
      width: 100%;
      background: #fff;
      padding: 10px 0;
    }

    .bottom-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      background-color: #fff;
      margin-top: 10px;
      padding-bottom: 10px;

      .list-button-group {
        display: flex;
        flex-direction: row;
        padding: 20px;

        .button-item {
          padding: 0px 10px;
        }

        .button-item:first-child,
        &:last-child {
          padding: 0px 10px 0 0;
        }
      }

      .table-list {
        flex: 1;
        padding: 0 20px 20px;
      }
    }

    .el-button {
      font-size: 0.14rem !important;
    }
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    margin-left: 10px;
  }

  .el-icon-arrow-down {
    font-size: 14px;
  }
</style>
